<template>
  <div class="container">
    <div class="handle-box">

      <el-row>

        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <el-input   placeholder="请输入查询关键字" class="handle-input mr10 searchLabel"/>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button class="searchButton" type="primary"icon="el-icon-search" @click="">搜索</el-button>
        </el-col>
      </el-row>

    </div>
    <el-table :data="userTableData.slice((this.queryUser.currentPage-1)*this.queryUser.pageSize,(this.queryUser.currentPage*this.queryUser.pageSize))"  border class="table" ref="multipleTable" header-cell-class-name="table-header"
              highlight-current-row>
      <el-table-column prop="id" label="学号/工号" min-width="120" align="center"/>
      <el-table-column prop="name" label="姓名" min-width="80" align="center"/>
      <el-table-column prop="clazz" label="班级" min-width="120" align="center"/>
      <el-table-column prop="score" label="得分" min-width="60" align="center"/>
      <el-table-column prop="commitTime" label="提交时间" min-width="180" align="center"/>
      <el-table-column label="批改状态" min-width="80" align="center">
        <template slot-scope="{row}">
          <el-tag :type="statusTagFormat(row)">
            {{ statusFormat(row)}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="300" align="center" >
        <template slot-scope="scope">
          <el-button type="text" :class="paperStatus === 0 ? 'editButton2' : 'editButton1'" icon="el-icon-edit" @click="commentPaper(scope.row.id)">
            <span v-if="this.paperStatus === 0">批改答题卡</span>
            <span v-if="this.paperStatus !== 0">重批答题卡</span>
          </el-button>
          <el-button type="text" class="editButton2" icon="el-icon-document" @click="checkPaper(scope.row.id)">查看答题卡
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="queryUser.currentPage"
                     :page-size="queryUser.pageSize" :total="queryUser.total" @current-change="handleUserChange"/>
    </div>
  </div>
</template>

<script>
  import answer from '../../../utils/answer'
  export default {
    name: 'CorrectList',
    data(){
      return{
        /* 考试状态 */
        status : '',
        paperStatus: '',
        userTableData: [],
        queryUser: {
          total: 10,
          pageSize: 7,
          currentPage: 1
        },
        userKeyWord: '',
        score: 0,
      }
    },
    created(){
      this.getData();
    },
    mounted(res) {
      let id = this.$route.query.id;
      let status = this.$route.query.status;
      /* 根据id查询出试卷,以及试卷所属的考试人员 */
      // 渲染页面
      console.log("examInfoEnd..." + status);
      this.status = status;
      // 0 1 2 未开始,正在进行,已经结束
    },
    methods: {
      getData(){
        this.userTableData = answer.answers;
        this.queryUser.total = answer.answers.length;
      },
      handleUserChange(val){
        /* 更换当前页 */
        this.$set(this.queryUser, 'currentPage', val);
        /*this.getData();*/
      },
      statusTagFormat(row){
        if(row.score === 0){
          this.paperStatus = 0;
          return 'danger';
        }else{
          this.paperStatus = 1;
          return 'success';
        }
      },
      statusFormat(row){

        if(row.score === 0){
          this.paperStatus = 0;
          return '未批改';
        }else{
          this.paperStatus = 1;
          return '已批改';
        }
      },
      /* 批改答题卡 */
      commentPaper(id){
        /* 跳转到批改答题卡的页面 */

      },
      /* 查看答题卡 */
      checkPaper(id){
        /* 跳转到查看答题卡 */

      }
    },
    watch:{

    }
  };
</script>

<style scoped>

  .table {
    width: 100%;
    font-size: 14px;
    margin-top: 3%;
  }
  .editButton1{
    font-size: 14px;
    color: red;
  }

  .editButton2{
    font-size: 14px;

  }

  .searchButton{
    margin-left: 10%;
  }
</style>
